<template>
  <div class="self_bartending_bartendUser">
    <c-title :hide="false" text="自助调酒"></c-title>
    <van-search v-model="keyword" shape="round" placeholder="请输入会员id/会员名称/手机号" @search="onSearch" />
    <div class="list">
      <div class="lis" @click="to_self_bartending_bartendUserDetail(item.uid)" v-for="item in listData" :key="item.uid">
        <div class="lis_t">
          <img :src="item.avatar_image" class="lis_t_img" alt="" />
          <div class="lis_t_c">
            <div class="lis_t_c_name">{{ item.nickname }}</div>
            <div class="lis_t_c_ID">ID：{{ item.uid }}</div>
          </div>
          <i class="iconfont icon-icon_more11"></i>
        </div>
        <div class="lis_b">
          <div class="orderBox">
            <div class="num">{{ item.total_count }}</div>
            <div class="txt">订单数</div>
          </div>
          <div class="orderBox">
            <div class="num">{{ item.total_price }}</div>
            <div class="txt">订单总额</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyword: "",

      listData: [],
      page: 1,
      total_page: 0,
      isLoadMore: false
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    onSearch() {
      this.init();
      this.getData();
    },
    to_self_bartending_bartendUserDetail(uid) {
      this.$router.push(this.fun.getUrl("self_bartending_bartendUserDetail", { id: uid }));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.consumer.index", { keyword: this.keyword }, "");
      if (result) {
        this.listData = data.data;
        this.total_page = data.last_page;
      } else {
        this.$toast(msg);
      }
    },
    init() {
      this.page = 1;
      this.listData = [];
      this.total_page = 0;
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let { data, msg, result } = await $http.post("plugin.self-bartending.api.employee.device.index", { keyword: this.keyword, page: this.page }, "");
        this.isLoadMore = true;
        if (result) {
          this.listData = this.listData.concat(data.data);
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  margin: 0 0.75rem;
  overflow: hidden;
  .lis {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0.63rem;
    .lis_b {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .orderBox {
        flex: 1;
        padding: 0.84rem 0;
        .num {
          font-weight: bold;
          font-size: 0.94rem;
          color: #f15353;
        }
        .txt {
          font-size: 0.81rem;
          color: #6e6e79;
        }
      }
    }
    .lis_t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.75rem;
      border-bottom: 0.03rem solid #f0f0f1;
      .lis_t_img {
        width: 3rem;
        height: 3rem;
        background: #d6d6dc;
        border-radius: 2.69rem;
        margin: 0;
        margin-right: 0.5rem;
      }
      .lis_t_c {
        flex: 1;
        text-align: left;
        overflow: hidden;
        .lis_t_c_name {
          font-weight: bold;
          font-size: 0.94rem;
          color: #00001c;
        }
        .lis_t_c_ID {
          font-size: 0.81rem;
        }
      }
      .icon-icon_more11 {
        color: #aaaab3;
        font-size: 1rem;
      }
    }
  }
}
</style>
